<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <title>两个领域内切换</title>
    <style type="text/css">
        #div1, #div2 {
            float: left;
            width: 350px;
            height: 190px;
            padding: 10px;
            border: 1px solid #aaaaaa;
            margin-right: 40px;
        }
    </style>
    <script>
        // ondragover，鼠标未松开之前一直在触发，
        function allowDrop(ev) {
            ev.preventDefault();
        }

        // ondrop鼠标释放时触发一次；
        function drop(ev) {
            ev.target.appendChild(document.getElementById('drag1'));
        }
    </script>
</head>

<body>

    <p>三哥可以在 左边的杀神领域和右边的蓝银领域 之间来回切换</p>
    <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
        <img src="tangsan.jpg" id="drag1" width="336">
    </div>
    <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</body>

</html>